<template>
    <div class="menu-wrapper">
        <template v-for="(item, index) in list">
            <el-menu-item
                v-if="item.path"
                :class="{ 'is-root': item.isRoot}"
                :index="item.path"
                :key="index">
                <i
                    v-if="item.icon"
                    :class="`iconfont icon-${item.icon} el-icon-hand-${item.icon}`" />
                <span
                    :class="{'font-bold': item.isRoot}"
                    slot="title">{{ item.title }}</span>
            </el-menu-item>
            <el-submenu
                v-else
                :class="{ 'is-root': item.isRoot}"
                :key="index"
                :index="item.title">
                <template slot="title">
                    <i
                        v-if="item.icon"
                        :class="`iconfont icon-${item.icon} el-icon-${item.icon} el-icon-hand-${item.icon}`" />
                    <span :class="{'font-bold': item.isRoot}">{{ item.title }}</span>
                </template>
                <hand-menu :list="item.children" />
            </el-submenu>
        </template>
    </div>
</template>

<script>
export default {
    name: 'HandMenu',
    props: {
        list: {
            type: Array,
            default: () => {
                return [];
            }
        }
    }
};
</script>
<style lang="less" scoped>
    .el-menu-item {
        height: 40px;
        line-height: 40px;
        &.is-active {
            background-color: #1890FF!important;
        }
    }
    .iconfont {
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        line-height: 40px;
    }
    .font-bold {
        font-weight: bold;
    }
</style>
<style lang="less">
.menu-wrapper {
    .el-submenu {
        .el-submenu__title {
            line-height: 40px;
            &:hover {
                color: #fff!important;
                background:rgba(24,144,255,0.2) !important;
                .iconfont {
                    color: #fff;
                }
            }
        }
        .el-menu-item {
            min-width: auto;
            background:rgba(0,28,55,1) !important;
        }
    }
    .el-submenu__title {
        height: 40px;
    }
    .el-menu-item:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
.menu .menu-wrapper .el-menu-item:hover .iconfont{
    color: #fff !important;
}
.menu .is-root .el-menu .menu-wrapper .el-menu-item:hover {
    background:rgba(24,144,255,0.2) !important;
    color: rgba(255,255,255,1) !important;
}

.menu .is-root .el-menu .menu-wrapper .el-submenu>.el-submenu__title {
    background:rgba(0,28,55,1) !important;
    color: rgba(255,255,255,.6) !important;
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}


.menu .is-root .el-menu .menu-wrapper .is-active {
    background:rgba(24,144,255,1) !important;
    color: rgba(255,255,255,1) !important;
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
.menu .is-root .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper>.el-menu-item {
    background:rgba(0,21,41,1) !important;
    color: rgba(255,255,255,.6);
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
.menu .is-root .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .el-submenu>.el-submenu__title {
    background:rgba(0,21,41,1) !important;
    color: rgba(255,255,255,.6);
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
.menu .is-root .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .is-active {
    background:rgba(24,144,255,1) !important;
    color: rgba(255,255,255,1) !important;
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
.menu .is-root .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper>.el-menu-item {
    background:rgba(0,11,21,1) !important;
    color: rgba(255,255,255,.6);
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
.menu .is-root .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .is-active {
    background:rgba(24,144,255,1) !important;
    color: rgba(255,255,255,1) !important;
    &:hover{
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}

.menu .is-root .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .el-submenu .el-menu .menu-wrapper .el-submenu .el-submenu__title {
    background:rgba(0,11,21,1) !important;
    color: rgba(255,255,255,.6);
    &:hover {
        background:rgba(24,144,255,0.2) !important;
        color: rgba(255,255,255,1) !important;
    }
}
</style>
